let chatDataStr = decodeHtml(charData);
let chartJsonArray = JSON.parse(chatDataStr);
let arrayLength = chartJsonArray.length;
let numericData = [];
let labelData = [];
for (let i= 0; i < arrayLength; i++){
    numericData[i] = chartJsonArray[i].value;
    labelData[i] = chartJsonArray[i].label;
}

let chatDataStr1 = decodeHtml(charData1);
let chartJsonArray1 = JSON.parse(chatDataStr1);
let arrayLength1 = chartJsonArray1.length;
let numericData1 = [];
let labelData1 = [];
for (let i= 0; i < arrayLength1; i++){
    numericData1[i] = chartJsonArray1[i].value;
    labelData1[i] = chartJsonArray1[i].label;
}

// 条形图
const data = {
    labels: labelData,
    datasets: [{
        label: '人数',
        data: numericData,
        backgroundColor: [
            'rgba(255, 99, 132, 0.5)',
            'rgba(255, 159, 64, 0.5)',
            'rgba(255, 205, 86, 0.5)',
            'rgba(75, 192, 192, 0.5)',
        ],
        borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
        ],
        borderWidth: 2
    }]
};
//饼图
const data1 = {
    labels:labelData1,
    datasets: [{
        label: 'My First Dataset',
        data: numericData1,
        backgroundColor: [
            'rgb(54, 162, 235)',
            'rgb(255, 99, 132)',
        ],
        hoverOffset: 4
    }]
};

const options ={
    plugins:{
        title:{
            display:true,
            text:'教师文化水平'
        }
    },
    scales: {
        y: {
            beginAtZero: true
        }
    }
}
const options1 = {
    plugins: {
        title: {
            display: true,
            text: '学生男女比例'
        }
    },
}
//条形图
new Chart(document.getElementById("myBarChart"),{
    type:'bar',
    data:data,
    options:options
})
//饼图
new Chart(document.getElementById("myPieChart"),{
    type:'pie',
    data:data1,
    options:options1
})
function decodeHtml(html){
    let txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}